<template>
  <div id="background" :style="{ backgroundImage: 'url(' + info.bgImage + ')' }">
    <div style="max-width: 840px; margin: 0 auto">
      <div class="app-hv-center app-column pt-8">
        <img
          class="avatar"
          :src="info.avatar"
          alt=""
        >
        <h1 class="mt-8" style="color: #151516; font-weight: 300">
          {{ info.name }}
        </h1>
      </div>

      <div class="app-flex mt-5">
        <el-input v-model="info.introduction" readonly />
        <el-button style="margin-left: 10px" @click="goTo(info.directSeeding)">直播间</el-button>
        <el-button @click="goTo(info.space)">个人空间</el-button>
      </div>
      <div class="app-flex my-5">
        <el-input
          v-model="name"
          placeholder="输入搜索歌曲"
          @input="getDataList()"
        />
        <el-button style="margin-left: 10px" @click="getRandom()">随便听听</el-button>
      </div>
      <el-table
        :data="dataList"
        style="width: 100%"
        :header-row-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="name" label="歌名" />
        <el-table-column prop="author" label="歌手" />
        <el-table-column prop="language" label="语言" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { getConfig,getDataList,randomMusic } from '@/api/user'
export default {
  data: () => ({
    info: {
      avatar: '',
      bgImage: '',
      directSeeding: '',
      id: 0,
      introduction: '',
      name: '',
      space: ''
    },
    name: '',
    dataList: []
  }),
  mounted() {
    this.getInfoConfig()
    this.getDataList()
  },
  methods: {
    getInfoConfig() {
      getConfig().then((res) => {
        if (res.code === 200) {
          this.info = res.data
        }
      })
    },
    getDataList() {
      const params = {
        pageNo: 1,
        pageSize: 5000,
        name: this.name
      }
      getDataList(params).then((res) => {
        if (res.code === 200) {
          this.dataList = res.data.dataList
          this.total = res.data.total
        }
      })
    },
    getRandom() {
      randomMusic().then(res => {
        if (res.code === 200) {
          navigator.clipboard.writeText(res.data.name).then(() => {
            this.$message.success(`已将随机音乐名《${res.data.name}》复制到剪切板`)
          },() => {
            this.$message.error(`复制失败`)
          })
        }
      })
    },
    goTo(url) {
      if (url.startsWith('http')) {
        window.open(url,'_blank')
      } else {
        window.open('https://' + url,'_blank')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#background {
  background-color: #cec3a0;
  background-size: 100% 100% ;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}
</style>
